<template>
  <div>
    <el-row>
      <el-col :span="6">1</el-col>
      <el-col :span="6">2</el-col>
      <el-col :span="6">3</el-col>
      <el-col :span="6">4</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card shadow="always">
          <div class="box" ref="boxA"></div>
          <input type="button" value="重置" @click="resizeCallback()" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always"> asas </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import _ from 'lodash'

export default {
  methods: {
    async initBoxA() {
      // 基于准备好的dom，初始化echarts实例
      this.$boxA = echarts.init(this.$refs.boxA);
      this.$boxA.showLoading();
      // 绘制图表
      this.$boxA.setOption({
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {},
          },
        },
        title: {
          text: "用户来源数据",
          left: "center",
        },
        legend: {
          top: 40,
        },
        tooltip: {
          trigger: "axis",
        },
        dataZoom: [
          {
            type: "slider",
          },
        ],
        grid: {
          top: 80,
          right: 20,
        },
      });

      let data = await this.$api.getReports(1);
      console.log(data);
      data.xAxis[0].boundaryGap = false;
      this.$boxA.setOption(data);
      this.$boxA.hideLoading();
    },
    resizeCallback() {
      this.$boxA.resize();
    },
  },
  mounted() {
    this.initBoxA();
		window.onresize = _.debounce(this.resizeCallback,400)
  },
	beforeDestroy(){
		window.onresize = null;
	}
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 600px;
}
</style>